﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Compare Stock.aspx.cs" Inherits="CompareStock" EnableViewState="true" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <script src="Scripts/dist/jquery.js" type="text/javascript"></script>
    <script src="Scripts/dist/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/dist/jquery.jqplot.min.js" type="text/javascript"></script>
    <link href="Scripts/dist/jquery.jqplot.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/dist/plugins/jqplot.highlighter.min.js" type="text/javascript"></script>
    <script src="Scripts/dist/plugins/jqplot.cursor.min.js" type="text/javascript"></script>
    <script src="Scripts/dist/plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>
    <script src="Scripts/dist/plugins/jqplot.ohlcRenderer.min.js" type="text/javascript"></script>
    <script src="Scripts/dist/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jqueryDatepick4.0.6/jquery.datepick.js"></script>
    <style type="text/css">@import "jqueryDatepick4.0.6/jquery.datepick.css";
    .style133
    {
        color: #000000;
    }
    .style134
    {
        font-size: small;
    }
        .style135
        {
            font-size: small;
            height: 122px;
            border: thin solid #000000;
        }
        .style136
        {
            width: 100%;
        }
        .style137
        {
            width: 237px;
        }
        .style138
        {
            font-size: 1.5em;
        }
        .style139
        {
            color: #FF0000;
        }
    </style>

       <script language=javascript>
           var chart;
           var divToBeWorkedOn = 'chart2';
           var zoomed = false;
           var zoomedOut = false;

           $(document).ready(function () {
               // Some simple loops to build up data arrays.


           });

           function drawGraph() {
               var webMethod = 'WebService.asmx/DisplayCompareStockHistory';
               var shareList = "";
               var firstShare = [];
               var secondShare = [];
               var thirdShare = [];
               var forthShare = [];
               var graph = "Line";
               var startDate = $('[id*=txtStartDate]').val();
               var endDate = $('[id*=txtEndDate]').val();
               var counter = 0;
               var firstShareSymbol = "NIL";
               var secondShareSymbol = "NIL";
               var thirdShareSymbol = "NIL";
               var forthShareSymbol = "NIL";

               var count = $('#<%= SharesListBox.ClientID %> :selected').length;
               var selectedOptions = $.map($('#<%= SharesListBox.ClientID %> :selected'),
                function (e) {

                    if (counter == 0)
                        firstShareSymbol = $(e).val();

                    else if (counter == 1)
                        secondShareSymbol = $(e).val();

                    else if (counter == 2)
                        thirdShareSymbol = $(e).val();

                    else if (counter == 3)
                        forthShareSymbol = $(e).val();

                    counter = counter + 1;

                    return $(e).val();

                });
                var str = selectedOptions.join(',');


                var parameters = "{'shareSymbol':'" + str + "', 'gameID':'" + gameID + "', 'startDate':'" + startDate + "', 'endDate':'" + endDate + "'}";
                $.ajax({
                    type: "POST",
                    url: webMethod,
                    data: parameters,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {

                        var stocks = response.d;
                        if (stocks != null) {
                            for (var i = 0; i < stocks.length; ++i) {
                                var stock = stocks[i];

                                for (var q = 0; q < stock.length; ++q) {
                                    var s = stock[q];
                                    var row = [s.Date, s.Open];

                                    if(i == 0)
                                        firstShare.push(row);

                                    else if (i == 1)
                                        secondShare.push(row);

                                    else if (i == 2)
                                        thirdShare.push(row);

                                    else if (i == 3)
                                        forthShare.push(row);
                                }
                            } //Close For loop

                            if (firstShare.length != 0) {

                                var plot3 = $.jqplot('chart2', [firstShare, secondShare, thirdShare, forthShare],
                                {
                                        // Series options are specified as an array of objects, one object
                                    // for each series.
                                        legend: {
                                            show: true,
                                            location: 'ne',     // compass direction, nw, n, ne, e, se, s, sw, w.
                                            xoffset: 12,        // pixel offset of the legend box from the x (or x2) axis.
                                            yoffset: 12,        // pixel offset of the legend box from the y (or y2) axis.
                                            labels: [firstShareSymbol, secondShareSymbol, thirdShareSymbol, forthShareSymbol]
                                        },
                                        axes: {
                                            xaxis: {
                                                renderer: $.jqplot.DateAxisRenderer,
                                                tickOptions: {
                                                    formatString: '%b&nbsp;%#d'
                                                }
                                            },
                                            yaxis: {
                                                tickOptions: {
                                                    formatString: '$%.2f'
                                                }
                                            },
                                            y2axis: {
                                                tickOptions: {
                                                    formatString: '$%.2f'
                                                }
                                            },
                                            y3axis: {
                                                tickOptions: {
                                                    formatString: '$%.2f'
                                                }
                                            },
                                            y4axis: {
                                                tickOptions: {
                                                    formatString: '$%.2f'
                                                }
                                            }
                                        },
                                        cursor: {
                                            show: true,
                                            zoom: true,
                                            tooltipLocation: 'sw',
                                            style: 'pointer'
                                        },
                                        highlighter: {
                                            show: true
                                        },
                                        seriesDefaults: {
                                            showMarker:true,
                                            pointLabels: {
                                            show: false,
                                            edgeTolerance: 5
                                        }},
                                        series: [
                                        {

                                            // Change our line width and use a diamond shaped marker.
                                            title: 'Test',
                                            lineWidth: 2,
                                            markerOptions: { style: 'dimaond' },
                                            yaxis:'yaxis'
                                        },
                                        {
                                            // Don't show a line, just show markers.
                                            // Make the markers 7 pixels with an 'x' style
                                            showLine: true,
                                            markerOptions: { size: 7, style: "x" },
                                            yaxis: 'yaxis'
                                        },
                                        {
                                            // Use (open) circlular markers.
                                            markerOptions: { style: "circle" },
                                            yaxis: 'yaxis'
                                        },
                                        {
                                            // Use a thicker, 5 pixel line and 10 pixel
                                            // filled square markers.
                                            lineWidth: 5,
                                            markerOptions: { style: "filledSquare", size: 10 },
                                            yaxis: 'yaxis'
                                        }
                                        ]
                                    }
                                    );
                            }
                        }
                    }, //Close Success
                    error: function (err) {
                        $('#' + divToBeWorkedOn).html("Unavailable");
                    }
                });      //Close $.ajax({ 

           }

</script>


 <script type="text/javascript">
            var webMethod = 'WebService.asmx/GetGameDateRange';
            var gameID = <%= Session["GameID"].ToString().ToLower() %>;
            var parameters = "{'gameID':'" + gameID + "'}";
            var min = '';
            var max = '';

            $.ajax({
                type: "POST",
                url: webMethod,
                data: parameters,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var game = response.d;
                    if (game != null) {
                        min = game.StartDate;
                        max = game.EndDate;

                        $(function () {
                            $('#txtStartDate').datepick({
                                minDate: min,
                                maxDate: max,
                                dateFormat: 'mm/dd/yyyy',

                                onSelect: function () {
                                    var selected = $('#txtStartDate').datepick({ dateFormat: 'mm/dd/yyyy' }).val();
                                    $("#txtEndDate").datepick("option", "minDate", selected);
                                }

                            });

                            $('#txtEndDate').datepick({
                                minDate: min,
                                maxDate: max,
                                dateFormat: 'mm/dd/yyyy',

                                onSelect: function () {
                                    var selected = $('#txtEndDate').datepick({ dateFormat: 'mm/dd/yyyy' }).val();
                                    $("#txtStartDate").datepick("option", "maxDate", selected);
                                }

                            });
                        });
                    }
                },
                error: function (err) {
                    $(divToBeWorkedOn).html("Unavailable");
                }

            });                                                                    
</script> 

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <span class="style138"><strong><span class="style133">Compare Stock</span><br />
    </strong></span>
    <table style="width: 100%; height: 42px;">
            <tr>
                <td class="style2" style="border: thin solid #000000" >
                    <strong>List of Stock</strong></td>
                <td class="style4" style="border: thin solid #000000">
                        <asp:LinkButton ID="BuySellLinkButton" runat="server" 
                            PostBackUrl="~/Stock History.aspx">Back To Stock History</asp:LinkButton>
                    </td>
            </tr>
            <tr style="border: thin solid #000000;">
                    <td class="style6" style="border: thin solid #000000; text-align: center;">
                    <span class="style133">Start Date:</span>
                    <input id="txtStartDate" type="text" readonly="readonly" name="txtStartDate" 
                            align="middle" /></td>
                    <td style="border: thin solid #000000; text-align: center;">
                    <span class="style133">End Date: </span>
                    <input id="txtEndDate" type="text" readonly="readonly" name="txtEndDate" 
                            align="middle" /></td>
           </tr>
           <tr style="border: thin solid #000000;">
                    <td style="color: #000000;" align="left" 
                        colspan="2" class="style135" valign="top">
                        &nbsp;<table class="style136">
                            <tr>
                                <td class="style137" valign="top">
                                    Please Select 1 - 4 Stocks To Compare:
                                    <br />
                            <asp:Label ID="tooltip_label" runat="server" ForeColor="Red" 
                                Text="** Stock you own **"></asp:Label>
                                </td>
                                <td style="color: #FF0000" valign="top">
                                    <asp:ListBox 
                                ID="SharesListBox" runat="server" DataSourceID="ShareCompanyNameDataSoruce" 
                                DataTextField="shareName" DataValueField="shareSymbol" 
                            SelectionMode="Multiple" style="margin-bottom: 0px" Height="121px" Width="177px">
                            </asp:ListBox>
                                    &nbsp; Hold Ctrl key for multiple selection</td>
                            </tr>
                        </table>
                    </td>
           </tr>
</table>

            <div style="height: 73px; text-align: center;">
                <table style="width: 100%; height: 39px;">
                    <tr>
                        <td class="style7" style="border: thin solid #000000;  text-align: center;" 
                            align="left" bgcolor="White" valign=top>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Compare_Button" runat="server" CausesValidation="False" 
                                onclick="Compare_Button_Click" style="height: 26px" Text="Compare" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span 
                                class="style134">&nbsp;&nbsp;<br />
                            </span><asp:Label ID="ErrorLabel" runat="server" ForeColor="Red"></asp:Label>
                            <br />
                        </td>
                    </tr>
                    <tr>
                            <td style="border-style: none; border-width: thin; font-size: small;" 
                                class="style131">
                                <br />
                                </td>
                        </tr>
                </table>
                </div>




<asp:SqlDataSource ID="ShareCompanyNameDataSoruce" runat="server" 
        ConnectionString="<%$ ConnectionStrings:stockmarketConnectionString %>" 
        SelectCommand="RetrieveShareCompanyName" 
    SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:SessionParameter Name="UserName" SessionField="UserName" Type="String" />
        <asp:SessionParameter Name="GameID" SessionField="GameID" Type="Int32" 
            DefaultValue="0" />
    </SelectParameters>
    </asp:SqlDataSource>

    <asp:Label ID="zoom_label" runat="server" ForeColor="#FF3300" 
        Text="You can zoom in by drag and drop. Zoom out by double left click" 
        Visible="False"></asp:Label>

<div id="chart2" style="height:357px; width:870px; margin:auto"></div>

    <span class="style139"><br />
    </span>

</asp:Content>

